<template>
  <div>
    <el-card style=" height: 6rem;">
      <el-form :inline="true">
        <el-form-item label="用户名">
          <el-input placeholder="用户名" v-model="queryuser.user"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-table :data="tableData" style="width: 100%" border="">
      <el-table-column label="ID" width="180">
        <template slot-scope="scope">
          <i class="el-icon-pear"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="密码" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.password }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <div>
            {{ scope.row.remarks }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, addUser, modUser, userquery,deleteUserId } from "../api/users";
export default {
  //data保存的数据(默认值)
  data() {
    return {
      tableData: [],
      queryuser: {
        user: "",
      },
      pager: {
        pageIndex: 1,
        pageSize: 10,
        rowsTotal: 30,
      },
      dialogFormVisible: false,
      form: {
        id: 0,
        username: "",
        password: "",
        remarks: "",
      },
      formLabelWidth: "120px",
      //当前下标
      nowIndex: 0,
    };
  },
  //mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
  mounted() {
    // getUsersById(1).then(({data})=>{
    //     console.log(data)
    // })

    // getList().then(({ data }) => {
    //   console.log(data);
    //   this.tableData = data;
    // });
    this.fetchData(this.pager);
  },
  // metheds  函数提前定义（ 类似提前声明变量 进入页面内容全部渲染完成后自动引函数）
  methods: {
    //查询
    query() {
      console.log(this.queryuser);
      if (this.queryuser.user === "") {
        this.fetchData(this.pager);
      } else {
        userquery(this.queryuser)
          .then(({ data }) => {
            console.log(data);
            this.tableData = data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    //添加
    handleAdd() {
      this.dialogFormVisible = true;
      this.form.id = 0;
      this.form.username = "";
      this.form.password = "";
    },
    //编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.username = row.username;
      this.form.password = row.password;
      //获取下标
      this.nowIndex = index;
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      console.log(index,row);
      console.log(row.id);
      deleteUserId(row.id).then(({data})=>{
        console.log(data);
        this.fetchData(this.pager);
      }).catch((err)=>{
        console.log(err);
      });
    },
    handleSizeChange(val) {
      console.log(val);
      this.pager.pageSize = val;
      this.fetchData(this.pager);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pager.pageIndex = val;
      this.fetchData(this.pager);
    },
    fetchData(pager) {
      getList(pager).then(({ data }) => {
        this.tableData = data.data.data;
        this.pager = data.data.pager;
      });
    },
    //确认信息（添加和编辑）
    confirm() {
      this.dialogFormVisible = false;
      console.log(this.form);
      if (this.form.id == 0) {
        if (this.form.username.length > 0 && this.form.password.length > 0) {
          addUser(this.form)
            .then(({ data }) => {
              this.tableData.push(data.data);
              console.log(data);
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.$message({ type: "warning", message: "不能为空" });
        }
      } else {
        modUser(this.form.id, this.form)
          .then(({ data }) => {
            this.tableData.splice(this.nowIndex, 1, data.data);
            console.log(data);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
